<template>
    <el-carousel class="carousel" height="200px" width="1500px" type="card">
        <el-carousel-item v-for="item in imgSrc" :key="item">
            <img :src="item.src" class="carousel_image_type" />
        </el-carousel-item>
    </el-carousel>
    <div class="homeContainer">
        <div class="home">推荐书目</div>
        <div class="all" v-if="book.length !== 0">
            <el-row :gutter="20" style="margin-bottom: 2rem" v-for="i in [0, 4]">
                <el-col :span="6" v-for="item in book.slice(i, i + 4)" :key="item">
                    <div class="item">
                        <img :src="item.coverImg" @click="detailHandler(item.bookID)" />
                        <div class="content">
                            <div class="title">{{ item.title }}</div>
                            <div class="price">
                                价格：
                                <span>{{ item.price.toFixed(2) }}</span
                                >元
                            </div>
                            <div class="author">作者：{{ item.author }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="footer">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    style="width: 100%; margin: 2rem auto 0 auto"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/utils/request";

export default {
    data() {
        return {
            imgSrc: [
                {
                    src: require("@/assets/carousel/1.jpeg"),
                },
                {
                    src: require("@/assets/carousel/2.jpeg"),
                },
                {
                    src: require("@/assets/carousel/3.jpeg"),
                },
            ],
            book: [],
            list: [],
            total: 0,
            currentPage: 1,
            pageSize: 8,
            pageNum: 0,
            isLoading: true,
        };
    },
    name: "HomeView",
    methods: {
        //分页当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.refresh();
            // console.log(`当前页: ${val}`);
        },
        async refresh() {
            await service({
                url: `/book/list/${this.currentPage}/${this.pageSize}?homeID=${this.homeObj.homeID}`,
                method: "get",
            }).then((res) => {
                this.book = res.data.records;
                this.total = res.data.total;
                this.pageNum = res.data.pageNum;
            });
        },
        detailHandler(bookID) {
            this.$router.replace(`detail/${bookID}`);
            setTimeout(() => {
                window.location.reload();
            }, 200);
        },
    },
    //接收传参
    computed: {
        homeObj() {
            return this.$route.query;
        },
    },
    //获取数据
    beforeMount() {
        this.refresh();
    },
};
</script>

<style lang="scss" scoped>
@import url("hover.css/css/hover.css");

.carousel {
    width: 80%;
    margin: 1rem auto 2rem auto;
}

.homeContainer {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
    align-items: center;

    .home {
        width: 90%;
        font-weight: bold;
        font-size: 2rem;
        padding-bottom: 2rem;
    }

    .all {
        img {
            cursor: pointer;
        }

        width: 80%;

        .item:hover {
            background: #03a9f4;
            box-shadow: 0 0 10px lightgray;
            color: whitesmoke;
            transition: 0.3s;

            img {
                box-shadow: 0 0 3px lightgray;
            }

            .content > .price > span {
                text-decoration: underline;
            }
        }

        .item {
            transition: 0.3s;
            padding: 2rem;
            margin: 0 auto;
            border: 1px solid var(--el-border-color-light);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

            .content {
                width: 100%;

                .title {
                    font-size: 1.2rem;
                    font-weight: bold;
                    font-family: "宋体", sans-serif;
                    padding: 1rem;
                    white-space: nowrap;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .price > span {
                    font-size: 1.1rem;
                    margin-right: 0.2rem;
                    font-weight: bold;
                }

                .author {
                    margin-top: 0.2rem;
                    height: 100%;
                    font-size: 1rem;
                    white-space: nowrap;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

.carousel_image_type {
    width: 100%;
}

</style>
